<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/WEB-INF/views/include/commons-head.jsp" %>
    <%@include file="/WEB-INF/views/include/commons-css.jsp" %>
    <style>
        .nav-tabs > li .close {
            margin: -3px 0 0 10px;
            font-size: 18px;
            padding: 5px 0;
            float: right;
        }

        .nav-tabs > li a[data-toggle=tab] {
            float: left !important;
        }

        #contentWrapper .content {
            padding: 5px 0px 0px;
        }

        #contentWrapper .nav > li > a {
            padding: 5px;
        }

        #contentWrapper .tab-content {
            padding: 5px 0px 0px;
        }

        #contentWrapper .nav-tabs-custom {
            margin-bottom: 0px;
        }

    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<%-- http://junaidqadir.com/backyard/bootstrap_add_rmove_tabs/ --%>
<%-- 网站 --%>
<div class="wrapper">
    <%-- 头部 --%>
    <%@include file="/WEB-INF/views/admin/home/top-header.jsp" %>
    <%-- 左侧菜单 --%>
    <%@include file="/WEB-INF/views/admin/home/left-menu.jsp" %>
    <!-- 中部内容 -->
    <div class="content-wrapper" id="contentWrapper">
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <!-- Custom Tabs -->
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#homeTab" data-toggle="tab">首页</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="homeTab">
                                xxxxxxxxxxxxxxx<br>
                                xxxxxxxxxxxxxxx<br>
                            </div>
                        </div>
                    </div>
                    <!-- nav-tabs-custom -->
                </div>
            </div>
        </section>
    </div>
    <%-- 底部版权 --%>
    <%@include file="/WEB-INF/views/admin/home/bottom-footer.jsp" %>
</div>
<%-- 公共部分JS --%>
<%@include file="/WEB-INF/views/include/commons-js.jsp" %>

<script type="text/javascript">
    $(function () {
        $('ul.treeview-menu li a').click(function () {
            var id = $(this).attr('menuId');
            var $tab = $navTabs.find('li a[href="#' + id + '"]');
            if ($tab.length > 0) {
                $tab.trigger('click');
                return;
            }

            var dataUrl = $(this).attr('data-url');
            if (dataUrl) {
                var opts = {
                    id: id,
                    url: dataUrl,
                    title: $(this).attr('title')
                };
                addTab(opts);
            }
        });

        var $contentWrapper = $('#contentWrapper');
        var $navTabs = $contentWrapper.find('ul.nav-tabs');
        var $tabContent = $contentWrapper.find('div.tab-content');

        // 移除 Tab
        $('#contentWrapper').on('click', 'ul li a .close', function () {
            // tab title
            var $tabBar = $(this).closest('li');
            // tab content
            var $tabContent = $($(this).closest('a').attr('href'));
            var isActive = $tabBar.hasClass('active');
            // 当前关闭的tab是激活的
            if (isActive) {
                // 往左边找相邻的tab
                var $prevTab = $tabBar.prev('li');
                if ($prevTab.length > 0) {
                    $prevTab.find('a').tab('show');
                } else {
                    // 左边没有找右边相邻的tab
                    var $nextTab = $tabBar.next('li');
                    if ($nextTab.length > 0) {
                        $nextTab.find('a').tab('show');
                    }
                }
            }
            $tabBar.remove();
            $tabContent.remove();
        });

        // 添加 Tab
        function addTab(options) {
            var $tabBar = $('<li><a href="#' + options.id + '" data-toggle="tab">' + options.title + ' <button class="close" type="button">x</button> </a></li>');
            var tabContent = '<div class="tab-pane" id="' + options.id + '"><iframe src="' + options.url + '" width="100%" height="' + calculateIframeHeight() + '" frameborder="0"></iframe></div>';
            $navTabs.append($tabBar);
            $tabContent.append(tabContent);
            $tabBar.find('a').tab('show');
        }

        var iframeHeight;

        function calculateIframeHeight() {
            if (iframeHeight) {
                return iframeHeight;
            }
//         内容整体高度
            var contentWrapperHeight = $('div.content-wrapper').outerHeight(true);
//        内容区域边距
            var $content = $('section.content');
            var contentOuterHeight = $content.outerHeight(true) - $content.height();
//        tabs边距
            var $tabs = $('div.nav-tabs-custom');
            var tabsOuterHeight = $tabs.outerHeight(true) - $tabs.height();
//        tabs工具栏高度
            var $tabsBar = $('div.nav-tabs-custom ul.nav-tabs');
            var tabsBarHeight = $tabsBar.outerHeight(true);
//        tab content 边距
            var $tabsContent = $('div.nav-tabs-custom div.tab-content');
            var tabsContentOuterHeight = $tabsContent.outerHeight(true) - $tabsContent.height();
            iframeHeight = contentWrapperHeight - contentOuterHeight - tabsBarHeight - tabsOuterHeight - tabsContentOuterHeight - 10;
            return iframeHeight;
        }

    });
</script>
</body>
</html>
